<script setup>
import { reactive } from 'vue';

const data = reactive({
    Val: ''
})
defineProps({
    placeholder: {
        type: String
    },
    value: {
        type: String,

    }

})
const emts = defineEmits(['update:value'])
const change = () => {
    emts('update:value', data.Val)
}

</script>
<template>
    <div>
        <div class="Input">
            <slot name="number"></slot>
            <input type="text" v-model="data.Val" :placeholder="placeholder" class="input" @input="change" />
            <slot name="ver">

            </slot>
            <slot name="VerCode">

            </slot>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.Input {
    display: flex;
    align-items: center;

    .input {
        border: none;
        // border:2px solid green;
        width: 550px;
        height: 80px;
        border-bottom: 1px solid #ccc;
        position: relative;
    }

}
</style>